<template>
    <section class="lr-item">
      <div class="inner" v-for="(i,k) in listinfo" :key="k">
          <div class="thumbs">
              <img :src="i.img" alt="thumbs">
          </div>
          <div class="details ">
                <p class="title">{{i.title}}</p>
                <p class="count">
                    <span>预约数：{{i.num}} </span>
                    <span>热度：{{i.hot}} </span>
                </p>
                <p class="charge">
                    <span class="price">￥{{i.price}} </span>
                    <span class="discount">{{i.discount}}折</span>
                </p>
          </div>
      </div>
    </section>
</template>

<script>
export default {
  name: 'LRItem',
    props: {
        listinfo: {
            type: Array,
            required: true
        }
    }
}
</script>

<style scoped lang="less">
  @import "../../style/style.less";
  .inner {
      margin-bottom: 10px;
    &:after {
        display: block;
        clear: both;
        content: "";
        visibility: hidden;
        height: 0;
    }
      .thumbs, .details {
          float: left;
      }
      .thumbs {
          width: 110px;
          height: 110px;
          line-height: 1;
          font-size: 0;
          img {
              width: 100%;
              height: 100%;
          }
          margin-right: 10px;
      }
      .details {
          width: calc(~'100% - 120px');
          height: 110px;
          .title {
              margin-bottom: 10px;
              height: 54px;
          }
          .count {
              margin-bottom: 10px;
          }
          .charge {
              .price {
                  color: @theme-color-dark;
              }
              .discount {
                  background-color: @theme-color;
                  color: #fff;
                  padding: 2px 4px;
              }
          }
      }
  }
</style>
